<template>
  <a-modal
    class="common-modal"
    :title="title"
    :footer="null"
    :width="1200"
    :visible="visible"
    @cancel="handleCancel"
    :maskClosable="false"
    style="top: 5%"
  >
    <div class="p-20">
      <div class="mb-20">
        <a-button type="primary" @click="getList">{{ $t('common.refresh') }}</a-button>
      </div>
      <a-table
        rowKey="id"
        :loading="loading"
        bordered
        size="small"
        :dataSource="dataSource"
        :columns="onOrbitHangerColumns"
        :pagination="false"
        :scroll="{ y: '50vh' }"
        :rowClassName="rowClassName"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'nextStationNo'">
            <span>{{ record.nextLineNo + "-" + record.nextStationNo }}</span>
          </template>
          <template v-if="column.key === 'noName'">
            <span>{{
              (record.processNo || "/") + "，" + (record.processName || "/")
            }}</span>
          </template>
          <template v-if="column.key === 'operate'">
            <a-button
              type="link"
              class="primary-link"
              @click="removeHang(record)"
              >{{ $t('other.remove') }}</a-button
            >
          </template>
        </template>
      </a-table>
    </div>
    <div class="common-modal-footer">
      <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from "vue";
import { onOrbitHangerColumns } from "./prodTimeConfig";
import axios from "@/utils/request";
import { message } from "ant-design-vue";
import i18n from '@/locales/index'
const { t } = i18n.global
let visible = ref(false);
let loading = ref(false);
let title = ref("");
let dataSource = ref([]);
let recordInfo = ref({});
const open = async (record) => {
  recordInfo.value = record;
  let hasInfo = await getList(record.hangerLineNo, record.stationNo);
  if (hasInfo) {
    title.value = `${t('other.onoOrbitHangerInfo')}(${record.stationNo})`;
    visible.value = true;
  }
};
const handleCancel = () => {
  visible.value = false;
  dataSource.value = [];
};
const removeHang = async (record) => {
  let { hangerLineNo, stationNo } = recordInfo.value;
  const res = await axios.postAction(
    "/api/hanger/hangerline-realtime/remove-outside-hanger",
    { lineNo: hangerLineNo, stationNo, hangerNo: record.hangerNo }
  );
  if (res.success) {
    message.success(res.msg);
    getList();
  }
};
const rowClassName = (record) => {
  if (record.doubtful) return "trErrBackgroundColor";
};
const getList = async () => {
  let { hangerLineNo, stationNo } = recordInfo.value;
  loading.value = true;
  const res = await axios.postAction(
    "/api/hanger/hangerline-realtime/get-station-track-hanger",
    { lineNo: hangerLineNo, stationNo }
  );

  if (res.success) {
    dataSource.value = res.data;
    loading.value = false;
    return true;
  } else {
    loading.value = false;
    return false;
  }
};
defineExpose({
  open,
});
</script>
